<!--
 * @Author: Wang WeiHao
 * @Date: 2024-01-11 17:58:03
 * @LastEditors: Wang WeiHao
 * @LastEditTime: 2024-05-07 11:06:03
 * @Description: 
 * @FilePath: \hmcs_map\src\views\spone\frontPage\jin\jin.vue
-->
<template>
  <div class="w-100 h-100">
    <containTemplete
      :title="'净-治理污染,改善水环境'"
      :secondTitles="['净水能力', '黑臭水体消除比例', '地下水综合生产能力']"
      :slotWidth="[28, 36, 36]"
    >
      <template #left>
        <div class="w-100 h-100">
          <jin1 :echartsData="echartsData1" v-if="echartsData1"> </jin1>
        </div>
      </template>
      <template #middle>
        <div class="w-100 h-100">
          <jin2 :echartsData="echartsData2" v-if="echartsData2"> </jin2>
        </div>
      </template>
      <template #right>
        <div class="w-100 h-100">
          <jin3
            :echartsData="echartsData3"
            v-if="echartsData3"
            :selectValue="right_value"
          >
          </jin3>
        </div>
      </template>
      <template #right_control>
        <proSelect
          :optionsData="useOptions().year()"
          :defaultSelectValue="new Date().getFullYear() - 1"
          v-model:select-value="right_value"
          :width="150"
        >
        </proSelect>
      </template>
    </containTemplete>
  </div>
</template>

<script setup lang="ts">
import containTemplete from "@/components/project/containTemplete.vue";
import proSelect from "@/components/project/proSelect.vue";
import jin1 from "./jin1.vue";
import jin2 from "./jin2.vue";
import jin3 from "./jin3.vue";
import { useOptions } from "@/hook/useOptions";
const echartsData1 = ref();
const echartsData2 = ref();
const echartsData3 = ref();
const right_value = ref();
const jsonData: any = inject("jsonData");
watch(
  () => jsonData.value,
  (newValue: any, oldValue) => {
    if (newValue) {
      echartsData1.value = newValue.jsc.jsnl;
      echartsData2.value = newValue.jsc.hcst;
      echartsData3.value = newValue.jsc.dxszhscnl;
    }
  }
);
</script>

<style scoped lang="less"></style>
